<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <style>
        .home {
            height: 100vh;
            border: 5px solid #666;
        }

        .header {
            height: 50px;
            background-color: aquamarine;
            display: flex;
            align-items: center;
        }

        .button {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff
        }
    </style>
    <div id="app">
        <button @click="text++">+</button>
        {{text}}
        <hr>
        <q-button :round="true" width="200px" height="50" :text="text" @transfer="lanzi" :parentValue="text">

            <template #default>
                登陆|
            </template>
            <!-- 作用域插槽 -->
            <template v-slot:right="{a}">
                |注册 {{a}}
            </template>
        </q-button>



    </div>
    <!-- ast语法树 -->
</body>
<script setup>
    const { ref, createApp, computed, onMounted } = Vue;
    const app = createApp({
        setup() {
            let text = ref(0);
            function lanzi(zhitiao) {
                console.log(zhitiao);
                text.value = zhitiao;
            }
            return {
                text,
                lanzi
            }
        }

    })
    // slot 插槽
    app.component('q-button', {
        props: {
            // 终极版
            width: {
                type: [String, Number],
                default: "300px"
            },
            height: {
                type: [String, Number],
                default: "50px"
            },
            backgroundColor: {
                type: [String],
                default: "green"
            },
            round: {
                type: [Boolean],
                default: false
            },
            roundSize: {
                type: Number,
                default: 30
            },
            text: {
                type: [String, Number],
                default: '按钮'
            },
            // 新增父传子属性
            parentValue: {
                type: [Number],
                // default: null,
                required: true
            }
        },
        setup(props, { emit }) {
            let options = computed(function () {
                return props;
            });

            function tansform(n) {
                return isNaN(Number(n)) ? n : n + 'px';
            }
            // 单向数据流 
            function edit() {
                console.log(options.value.text)
                // options.value.text++
                let text = options.value.text; // 老数据
                emit('transfer', text + 1);
                // 子传父，将修改后的值传给父组件
                emit('childToParent', text + 1);
            }
            return {
                options,
                tansform,
                edit
            }
        },
        template: `
      <div class="button" :style="{
          width:tansform(options.width),
          height:tansform(options.height),
          backgroundColor:options.backgroundColor,
          borderRadius:options.round?options.roundSize+'px':0,
        }"
        @click="edit">
        <!-- 渲染匿名插槽内容 -->
        <slot /> 
        <!-- 渲染具名插槽内容 -->
        <slot name="right" :a="options.parentValue" />
      </div>
    `
    }).mount('#app')
</script>

</html>